<template>
	<view class="l_pages">
		<jnavbar title="购买会员"></jnavbar>
		<scroll-view class="page_container tab_page_container" scroll-y>
			<view class="page">
				<view class="item-box"><!-- <vipInterests></vipInterests> --></view>
				<view class="item-box">
					<view class="title">{{ packageList.name }}</view>
					<u-cell-group>
						<!-- <u-cell-item :arrow="false">
							<view slot="title" class="box-title">
								<view class="title-t" style="width: 200rpx;">会员卡有效时间</view>
								<view class="content">2021/9/11-2021/12-12</view>
							</view>
						</u-cell-item> -->
						<u-cell-item :arrow="false">
							<view slot="title" class="box-title">
								<view class="title-t" style="width: 200rpx;">会员卡有效期</view>
								<view class="content">{{ packageList.indate }}天</view>
							</view>
						</u-cell-item>
						<u-cell-item :arrow="false">
							<view slot="title" class="box-title">
								<view class="title-t" style="width: 200rpx;">会员卡权益</view>
								<view class="content">指定商品{{ packageList.discount }}折</view>
							</view>
							<!-- <view style="color:#D6D6D6" slot="right-icon">
								<text>详情</text>
								<u-icon name="arrow-right"></u-icon>
							</view> -->
						</u-cell-item>
						<u-cell-item :arrow="false" v-for="(item, i) in packageList.info" :key="i">
							<view slot="title" class="box-title">
								<view class="title-t" style="width: 200rpx;">会员卡权益</view>
								<view class="content">
									<text>{{ item.title }}</text>
									<!-- {{packageList.content?packageList.content:'无'}} -->
								</view>
							</view>
						</u-cell-item>
					</u-cell-group>
				</view>
				<view class="item-box">
					<view class="title">开卡即赠</view>
					<u-cell-group>
						<u-cell-item :arrow="false">
							<view slot="title" class="box-title">
								<view class="title-t">积分</view>
								<view class="content">{{ packageList.present_integer ? packageList.present_integer : '0' }}积分</view>
							</view>
						</u-cell-item>
						<u-cell-item :arrow="false">
							<view slot="title" class="box-title">
								<view class="title-t">余额</view>
								<view class="content">{{ packageList.present_money ? packageList.present_money : '0' }}元</view>
							</view>
						</u-cell-item>
						<u-cell-item :arrow="false" >
							<view slot="title" class="box-title">
								<view class="title-t">优惠卷</view>
								<view class="content">优惠卷×{{ packageList.is_present_coupon&&packageList.present_coupon ? packageList.present_coupon.length : 0 }}</view>
							</view>
							<!-- <view style="color:#D6D6D6" slot="right-icon">
								<text>详情</text>
								<u-icon name="arrow-right"></u-icon>
							</view> -->
						</u-cell-item>
					</u-cell-group>
				</view>
			</view>
		</scroll-view>
		<view class="btn-view" v-if="packageList.is_buy_upgrade == 1 && userLevel < packageList.level">
			<!-- <view></view> -->
			<view class="btn-rule">
				<u-checkbox-group class="disf"><u-checkbox v-model="checked" shape="circle" active-color="#F1BA89">已阅读并同意</u-checkbox></u-checkbox-group>
				<view class="text" @click="showRule">《{{ packageList.name }}用户协议》</view>
			</view>
			<view class="btn" @click="payment">立即支付 ￥{{ packageList.buy_price }}</view>
		</view>
		<u-popup v-model="show" mode="center" width="600rpx" height="800rpx" border-radius="14" :closeable="true">
			<scroll-view class="popup-content" scroll-y>
				<view class="content_title">{{ popupContent.title }}</view>
				<u-parse  :tag-style="style" :domain="baseUrl" :html="popupContent.content" :show-with-animation="true"></u-parse>
			</scroll-view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import vipInterests from '../../components/renovation/vipUser/vip_interests.vue';
 import {mapState, mapMutations} from 'vuex';
 import util from '@/common/util.js';
import base from '@/common/baseUrl.js';
export default {
	data() {
		return {
			checked: false,
			show: false,
			form: {
				name: '2021/9/11-2021/12-12'
			},
			level: 0,
			packageList: [],
			userLevel: 0,
			popupContent: {},
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
			
		};
	},
	computed:{
		baseUrl(){
			return util.geturl(base.baseUrl)
		},
		...mapState({
			userInfo: state => state.userInfo,
			oss: state => state.oss
		})
	},
	components: {
		vipInterests
	},
	async onLoad(e) {
		await this.$getWx
		if (e) {
			this.level_id = e.level_id;
			this.$http('/membership/level/' + e.level, {}, 'get').then(res => {
				let packageList = res.data.msg;
				if(packageList.present_coupon&&packageList.is_present_coupon)
				packageList.present_coupon=JSON.parse(packageList.present_coupon)
				console.log(packageList)
				this.packageList=packageList
				this.level = this.packageList.level;
			});
			// 获取用户level等级
			let _this = this;
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					_this.userLevel = res.data.level;
				}
			});
		}
	},
	methods: {
		showRule() {
			this.$http('/protocol/4', {}, 'GET').then(res => {
				this.popupContent = res.data.msg;
			});
			// https://z.jingzhe365.com
			this.show = true;
		},
		payment() {
			if (this.checked) {
				let data = {
					level: this.level
				};
				this.Jumpurl({
					link: '../pay/pay?level=' + this.level_id + '&total=' + this.packageList.buy_price,
					type: 1,
					level: this.level
				});
			} else {
				uni.showToast({
					title: '请同意《xx会员用户协议》',
					duration: 2000,
					icon: 'none'
				});
			}
		},
		details() {
			this.Jumpurl({
				link: '../welfare/welfare?level=' + this.level,
				type: 1,
				level: this.level
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page_container {
	height: calc(100vh - 140rpx);
}

.page {
	padding: 20rpx;

	.item-box {
		width: 100%;
		border-radius: 20rpx;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 20rpx;
		font-family: PingFang SC;
		color: #333333;
		overflow: hidden;

		.box-title {
			display: flex;

			.title-t {
				width: 120rpx;
				text-align: right;
			}

			.content {
				width: 320rpx;
				margin-left: 20rpx;
				font-weight: bold;
				color: #ce6b32;
				font-size: 24rpx;
			}
		}

		.title {
			font-weight: bold;
			padding: 30rpx;
			position: relative;
		}

		.form {
			color: #343434;

			/deep/.u-form-item__body {
				align-items: flex-start;
			}

			.form-txt {
				font-weight: bold;
				color: #ce6b32;
				padding-left: 30rpx;
				font-size: 24rpx;
			}
		}
	}

	.item-label {
		padding: 25rpx 0 0;
		// background-image: url(../../static/images/vio.png);
		background-repeat: no-repeat;
		background-size: cover cover;
		overflow: hidden;

		.title {
			padding: 0rpx 40rpx 30rpx;
			font-size: 34rpx;
			font-weight: 400;
			line-height: 24px;
			color: #383e5a;
		}

		.content {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.content-item {
				flex: 0 0 25%;
				margin: 0rpx 0 60rpx;

				.item-icon {
					width: 94rpx;
					height: 94rpx;
					line-height: 95rpx;
					text-align: center;
					background: #f9f5eb;
					border-radius: 50%;
					margin: auto;
				}

				.txt {
					font-size: 12px;
					font-weight: 500;
					color: #454657;
					margin-top: 20rpx;
					text-align: center;
					transform: scale(0.9);
				}
			}
		}
	}
}

.btn-view {
	width: 100%;
	height: 140rpx;
	display: flex;
	box-shadow: 0px -3px 4px rgba(141, 141, 141, 0.16);
	text-align: center;
	justify-content: center;

	.btn-rule {
		padding: 20rpx 0;
		width: 100%;
		text-align: center;
		.text {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 22px;
			color: #0593ff;
		}
	}

	.btn {
		width: 100%;
		background-color: #252525;
		line-height: 140rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f1ba89;
		font-size: 34rpx;
	}
}



.disf {
	display: flex;
	justify-content: center;
}
</style>
